<template>
  <view v-if="!isLoading" class="container">

    <view class="header">
      <view class="search-input-wrap">
        <view class="yz-iconfont yz-sousuo"></view>
        <input class="search-input" placeholder="请输入您搜索的内容" v-model="keyword"/>
        <view class="search-button" @click="search">搜索</view>
      </view>
    </view>

    <view class="content">
      <view class="cate-list">
        <view :class="cid==item.id?'active':''" v-for="(item,index) in categoryList" :key="index"
              @click="tapNav(index,item)">
          {{ item.name }}
        </view>
      </view>

      <view class="goods-list">
        <view class="cur_cate">{{categoryTitle}}</view>
        <scroll-view scroll-y="true" @scrolltolower="lower" class="goods-scroll">
          <view class="item" v-for="(item,index) in goodsList" :key="index" @click="$xyfun.to('/pages/shop/detail?id='+item.id)">
            <image :src="$xyfun.image(item.image)"></image>
            <view class="title">{{item.title}}</view>
          </view>
          <view v-if="!isLoading && isEmpty">
            <xy-empty :text="'暂无商品'"/>
          </view>
        </scroll-view>
      </view>
    </view>

    <xy-tabbar />
  </view>
</template>

<script>
import { mapState,mapActions } from 'vuex';
import xyEmpty from "@/components/xy-empty/index.vue";
import xyTabbar from "@/components/xy-tabbar/index.vue";
export default {
  components: {
    xyTabbar,
    xyEmpty,
  },
  data() {
    return {
      isEmpty:true,
      currentPage: 1,
      categoryList: [],
      keyword: '',
      //这里最多能支持2级分类
      cid: 0,//pid=0
      sid: 0,//pid=cid
      categoryTitle: '',
      categoryErList: [],
      banner: [],
      goodsList: [],
      isLoading:true,
      scrollTop:0,
      lastPage: 1,
    }
  },
  computed: {
    ...mapState(['common','user'])
  },
  async onLoad(options) {
    var that = this;
    if(options?.keyword){
      this.keyword = options.keyword;
    }
    if(options?.cid){
      this.cid = options.cid;
    }
    that.loadData();
  },
  onPullDownRefresh() {
  },
  methods: {
    async loadData(){
      var that = this;
      this.$api.get({
        url: '/goods/categories',
        data:{
          type:'goods',
          store_id: uni.getStorageSync('store_id')
        },
        success: (data) => {
          let all_cat = {
            id : 0,
            name : '全部'
          }
          let arr = [all_cat,...data];
          that.categoryTitle = '全部';
          that.categoryList = arr;

          that.currentPage = 1;
          that.goodsList = [];
          that.getGoodsList();
        }
      });
    },

    lower(){
      if(this.currentPage < this.lastPage) {
        this.currentPage += 1;
        this.getGoodsList();
      }
    },
    // 产品列表
    getGoodsList: function() {
      var that = this;

      this.$api.post({
        url: '/goods/lists',
        loadingTip:'加载中...',
        data: {
          search: that.keyword,
          page: that.currentPage,
          category_id: that.sid ? that.sid : that.cid,
          store_id: uni.getStorageSync('store_id')
        },
        success: res => {

          this.goodsList = [...this.goodsList, ...res.data];
          this.isEmpty = !this.goodsList.length;
          this.isLoading = false;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;

        }
      });

    },

    tapNav(index, item) {
      var list = this.categoryList[index];
      this.scrollTop = 0;
      this.categoryTitle = list.name;
      this.categoryErList = item.children ? item.children : [];
      this.cid = list.id;
      this.sid = 0;
      this.currentPage = 1;
      this.goodsList = [];
      uni.pageScrollTo({
        scrollTop: this.scrollTop,
        duration: 300
      });

      this.getGoodsList();
    },

    search(e){
      this.categoryTitle = '全部';
      this.sid = 0;
      this.cid = 0;
      this.currentPage = 1;
      this.goodsList = [];
      this.getGoodsList();
    }
  }
}
</script>

<style>
page{
  overflow: hidden;
}
</style>
<style scoped lang="scss">
.container{
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header{
  background: #fff;
  position: relative;
  padding-top: 30rpx;
  margin: 0 20rpx;
}

.content{
  height: 1rpx;
  flex-grow: 1;
  display: flex;
  margin-top: 30rpx;
}
.cate-list{
  width: 200rpx;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-y: scroll;
  background: #f5f5f5;
  &::-webkit-scrollbar {
    display: none;
  }
  view{
    line-height: 80rpx;
    font-size: 28rpx;
    height: 80rpx;
    position: relative;
    padding-left: 30rpx;
  }
  .active{
    background: #fff;
  }
  .active:after{
    background: $theme2;
    height: 30rpx;
    border-radius: 8rpx;
    width: 5rpx;
    display: block;
    content: '';
    position: absolute;
    left: 15rpx;
    bottom: 26rpx;
  }
}



.goods-list {
  width: 1rpx;
  flex-grow: 1;
  background: #fff;
  margin-left: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  .cur_cate{
    text-align: center;
    color: #666;
    margin-bottom: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    &:before{
      content: '';
      display: block;
      width: 60rpx;
      height: 2rpx;
      background: #666;
      margin-right: 20rpx;
    }
    &:after{
      content: '';
      display: block;
      width: 60rpx;
      height: 2rpx;
      background: #666;
      margin-left: 20rpx;
    }
  }
  .goods-scroll{
    overflow-y: auto;
    display: flex;
  }
  .item{
    background: #fff;
    width: 130rpx;
    float: left;
    margin-right: 40rpx;
    &:nth-of-type(3n){
      margin-right: 0;
    }
    image{
      height: 130rpx;
      width: 130rpx;
      border-radius: 20rpx;
    }
    .title{
      margin-top: 10rpx;
      text-align: left;
      font-size: 26rpx;
      height: 80rpx;
      overflow: hidden;
    }
  }
}

</style>
